import { React, useState, useEffect } from 'react';
import './browse.css';
import '../../index.css'
import axios from 'axios';
import smallgouwuche from './购物车小图标one.png';
import liulanjilushanchutubiao from './浏览记录删除图标one.png';
import { Pagination } from 'antd';
import InterIP from '../../IP/IP'
import { useNavigate } from 'react-router-dom';

export default function Browse() {
    const [data, setdata] = useState([]);
    const [twig, setTwig] = useState();
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    const navigate = useNavigate();

    //初次请求第一页
    useEffect(() => {
        var userID = document.cookie.slice(5);
        let IP = InterIP().props.children;
        axios.post("http://" + IP + ":3000/user/selBrowsing", {
            user_id: userID,
            page: '1',
        })
            .then((res) => {
                setdata((data) => data = res.data.rows)
                setTwig((twig) => twig = res.data.rows_length)
            })

    }, []);
    //删除！！！！！！！！！！！！
    function browse_remove(id, k) {
        return () => {
            axios.post("http://" + IP + ":3000/user/delBrowsing", {
                id: id,
            }).then((res) => {
                setdata((data) => data = data.filter((v, key) => {
                    return !(key === k);
                }))
            })
        }
    }

    // 增加！！！！！！！！！！！！！
    function jiajiajiajia() {
        axios.post("http://" + IP + ":3000/user/addBrowsing", {
            commodity: "草莓",
            commodity_img: "https://i.loli.net/2021/11/26/pAYiMaC9V8BDXLz.jpg",
            introduce: "嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷",
            original_price: "123",
            current_price: "321",
            user_id: "8",
            product_id: '14',
        })
            .then((res) => {

            })
    }

    // 请求第几页
    function browse_pagingye(page) {
        axios.post("http://" + IP + ":3000/user/selBrowsing", {
            user_id: userID,
            page: page,
        })
            .then((res) => {
                console.log(res);
                setdata((data) => data = res.data.rows)
            })
    }
    function browseDetails(id) {
        return () => {
            axios.post('http://' + IP + ':3000/index/product', {
                product_id: id,
            }).then((res) => {
                if (res.data[0].product_variety === 'friday') {
                    localStorage.productId = id;
                    navigate('/home/fridayDetails')
                } else {
                    localStorage.productId = id;
                    navigate('/home/productDetails')
                }
            })
        }
    }
    return (

        < div className="browsebox" >
            <div className="mybill_top" onClick={jiajiajiajia}>最近浏览</div>
            <div className="browse_bottommain">
                {data.map((browseMain, k) => {
                    return (
                        <div className="browse_main" key={browseMain.browsing_id} >
                            <div className="browse_img"><img src={browseMain.commodity_img} alt="" /></div>
                            <div className="browse_name" onClick={browseDetails(browseMain.product_id)}>{browseMain.commodity}</div>
                            <div className="browse_xa">{browseMain.introduce}</div>
                            <div className="browse_letter">
                                <div>￥<span>{browseMain.current_price}</span></div>
                                <div>￥<span>{browseMain.original_price}</span></div>
                                <div className="browse_img2"><img src={smallgouwuche} alt="" /></div>
                            </div>
                            <div className="browse_img3" onClick={browse_remove(browseMain.browsing_id, k)}><img src={liulanjilushanchutubiao} alt="" /></div>
                        </div>
                    )
                })}

            </div>

            <Pagination className="browse_paging" onChange={browse_pagingye} total={twig} pageSize={6}
            ></Pagination>

        </div >
    )
}
